define('view/sys/client', ['WxCore',"vuex", 'text!./client.html'], function (wxCore,{ mapActions }, template) {

    return {
        template: template,
        data: function () {
            return {
                totalCount: 0,
                pageIndex:1,
                pageSize:10,
                tableData:[],
                columns:[
                    {
                        type: 'index',
                        title: '序号',
                        align: 'center',
                        width: 60
                    },
                    {
                        title: '应用编号',
                        key: 'clientId'
                    },
                    {
                        title: '应用名称',
                        key: 'clientName'
                    },
                    {
                        title: '首页',
                        key: 'webHomeUrl'
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime'
                    },
                    {
                        title: '操作',
                        key: this.columnKey,
                        align: 'center',
                        fixed: 'right',
                        width: 200,
                        render: (h, params) => {
                            return h('div', [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'default',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.editAction(params)
                                            }
                                        }
                                    },
                                    '编辑'
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'default',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.deleteAction(params)
                                            }
                                        }
                                    },
                                    '删除'
                                )
                            ])
                        }
                    }
                ],
                loading:false,
                stripe:false,
                modalTitle:'',
                modalShow:false,
                rolesLoaded:false,
                formRef: 'editForm',
                formData: {},
                formValidateRule: {},
                roles: [],
                rolesLoaded: false
            }
        },
        methods: {
            ...mapActions('ClientStore', [
                'getValidateRule',
                'list',
                'save',
                'delete'
            ]),
            onChangePage: function (currentPageIndex) {
                this.pageIndex = currentPageIndex;
                this.loadData();
            },
            loadData: function() {
                this.loading=true;
                this.list({
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize
                }).then((responseResult) => {
                    this.totalCount = responseResult.total;
                    this.tableData = responseResult.list.map((item, index) => {
                        let itemMap = wxCore.propertieToString(
                            item
                        )
                        return itemMap
                    })
                    this.loading = false;
                }).catch(err => {
                    console.log(err)
                    this.loading = false
                });
                //this.$emit('load-data', pageInfo)
            },
            // 打开新增窗口
            addAction: function () {
                this.clearFormData()
                this.formData = {
                    clientType: '1',
                    authorizedGrantTypes: [ 'authorization_code', 'implicit' ],
                    autoApprove: 'false',
                    webHomeUrl: 'http://'
                }
                console.log('showAdd')
                this.modalTitle = '新增'
                this.modalShow = true
            },
            // 刷新列表
            refreshAction: function () {
                this.loadData();
            },
            formCancelHandle: function () {
                this.modalShow = false
            },
            formSaveHandle: function () {
                this.$refs[this.formRef].validate(valid => {
                    if (!valid) {
                        this.$Message.error('输入信息不合法')
                    } else {
                        //console.log(this.formData);
                        let grantTypes = ''
                        let grantLenth = this.formData.authorizedGrantTypes.length
                        for (var i = 0; i < grantLenth; i++) {
                            grantTypes += this.formData.authorizedGrantTypes[i]
                            if (i < grantLenth - 1) {
                                grantTypes += ','
                            }
                        }
                        const requestData = {
                            clientId: this.formData.clientId,
                            clientName: this.formData.clientName,
                            clientSecret: this.formData.clientSecret,
                            webHomeUrl: this.formData.webHomeUrl,
                            clientType: this.formData.clientType,
                            autoApprove: this.formData.autoApprove,
                            authorizedGrantTypes: grantTypes
                        }
                        this.save(requestData)
                            .then(res => {
                                this.clearFormData();
                                this.modalShow = false;
                                this.$Message.info('保存成功');
                                this.loadData();
                            })
                            .catch(err => {
                                this.$Message.error('服务异常');
                                console.log('>>>err:', err);
                            })
                    }
                });
            },
            clearFormData: function () {
                this.$refs[this.formRef].resetFields();
                this.formData = {};
            },
            editAction (params) {
                this.clearFormData();
                this.modalTitle = '编辑'
                this.modalShow = true
                for (let prop in params.row) {
                    this.formData[prop] = params.row[prop]
                }
                let grantTypes = this.formData.authorizedGrantTypes.split(',')
                this.formData.authorizedGrantTypes = grantTypes
            },
            deleteAction (params) {
                this.$Modal.confirm({
                    title: '删除',
                    content: '确定要删除么？',
                    onOk: () => {
                        this.delete(params.row.clientId)
                            .then(res => {
                                this.$Message.info('删除成功')
                                this.loadData()
                            })
                            .catch(err => {
                                this.$Message.error(err)
                            })
                    }
                })

            }
        },
        created() {
            // 加载验证规则
            this.getValidateRule().then(val => {
                this.formValidateRule = {}
                for (let ruleColumn in val) {
                    this.formValidateRule[ruleColumn] = val[ruleColumn]
                }
            });
            this.loadData();
        }
    }
})